<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <base id="base" href="${base}">
    <title>user</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript"  language="javascript" src="/static/js/user.js" ></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/user.css" />
</head>
<body>
    <div class=".container-fluid">
        <div class="row">
            <div class="col-xs-12 col-md-1"></div>
            <div class="col-xs-12 col-md-10">
                <nav class="navbar navbar-default">
                    <div class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2" class="lbl-user">联系人</label>
                            <input type="text" class="form-control" id="user_name">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2" class="lbl-user-type" >用户类型</label>
                            <select class="form-control" id="user_type">
                                <option>全部</option>
                                <option>管理员</option>
                                <option>B1运营专员</option>
                                <option>B2运营专员</option>
                                <option>未设置类型</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2" class="lbl-user-state">用户状态</label>
                            <select class="form-control" id="user_state"">
                                <option>全部</option>
                                <option>已启用</option>
                                <option>禁用</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-default" id="search">查询</button>
                        <button class="btn btn-info" data-toggle="modal" data-target="#register">注册</button>
                    </div>
                </nav>

                <div class="panel panel-default">
                    <!-- Table -->
                    <table class="table" id="table">
                        <tr class="active" >
                            <td>联系人</td>
                            <td>手机号</td>
                            <td>域账号</td>
                            <td>用户类型</td>
                            <td>创建时间</td>
                            <td>状态</td>
                            <td>操作</td>
                        </tr>
                    <#if userList?? && userList?size gt 0>
                        <#list 0..(userList!?size-1) as i>
                        <tr>
                            <td>${userList[i].username!}</td>
                            <td>${userList[i].phoneNumber!}</td>
                            <td>${userList[i].domainAccount!}</td>
                            <td>${userList[i].role!}</td>
                            <td>xxxxxxxxxx</td>
                            <td>${userList[i].state!}</td>
                            <td id="${userList[i].id!}">
                                <#if (userList[i].state == 0)>
                                    <button type="button" class="btn btn-success" onclick="changState(this);">启用</button>
                                    <button class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="selectUser(this);">编辑</button>
                                <#else>
                                    <button type="button" class="btn btn-warning" onclick="changState(this);">禁用</button>
                                    <button class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="selectUser(this);">编辑</button>
                                </#if>
                    </td>
                        </tr>
                        </#list>
                    </#if>
                    </table>
                </div>
                <div class="navigation">
                    <input type="hidden" id="pageNum" value="${pageInfo.pageNum}">
                    <input type="hidden" id="pages" value="${pageInfo.pages}">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="ul">
                            <li>
                                <a aria-label="Previous">
                                    <span aria-hidden="true" id="up_page">上一页</span>
                                </a>
                            </li>
                            <li>
                                <a aria-label="Next">
                                    <span aria-hidden="true" id="next_page">下一页</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="col-xs-6 col-md-1"></div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        编辑用户信息
                    </h4>
                </div>
                <div class="modal-body">
                        <label>用户角色</label>
                       <select class="form-control" id="updateRole">
                         <option>全部</option>
                         <option>管理员</option>
                         <option>B1运营专员</option>
                         <option>B2运营专员</option>
                         <option>未设置类型</option>
                       </select>
                       <label>联系人</label>
                       <input type="text" class="form-control" id="updateUsername">
                       <label>手机号</label>
                       <input type="text" class="form-control" id="upadtePhoneNumber">
                 </div>
                <div class="modal-footer">
                    <input type="hidden" value="" id="updateId">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="updateInformation(this);">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        注册用户信息
                    </h4>
                </div>
                <div class="modal-body">
                    <label>用户角色</label>
                    <select class="form-control" id="reRole">
                        <option>全部</option>
                        <option>管理员</option>
                        <option>B1运营专员</option>
                        <option>B2运营专员</option>
                        <option>未设置类型</option>
                    </select>
                    <label>用户状态</label>
                    <select class="form-control" id="reState">
                        <option>全部</option>
                        <option>已启用</option>
                        <option>禁用</option>
                    </select>
                    <label>联系人</label>
                    <input type="text" class="form-control" id="reUsername">
                    <label>手机号</label>
                    <input type="text" class="form-control" id="rePhoneNumber">
                    <label>域账号</label>
                    <input type="text" class="form-control" id="reDomainAccount">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="register();">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>